<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="color-scheme" content="dark light">
    <title>Piping a fetch response to StreamSaver</title>
  </head>
  <body>
    <button id="$start">Start</button>
    <script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>
    <script src="../StreamSaver.js"></script>
    <script>
      $start.onclick = () => {
        const url = 'https://d8d913s460fub.cloudfront.net/videoserver/cat-test-video-320x240.mp4'
        const fileStream = streamSaver.createWriteStream('cat.mp4')

        fetch(url).then(res => {
          const readableStream = res.body

          // more optimized
          if (window.WritableStream && readableStream.pipeTo) {
            return readableStream.pipeTo(fileStream)
              .then(() => console.log('done writing'))
          }

          window.writer = fileStream.getWriter()

          const reader = res.body.getReader()
          const pump = () => reader.read()
            .then(res => res.done
              ? writer.close()
              : writer.write(res.value).then(pump))

          pump()
        })
      }
    </script>
  </body>
</html>
